<template>
	<view class="content">
		<!-- <image class="topImg" src="/static/img/top.png"></image> -->
		<view class="head_box">
			<swiper class="swiper" :circular="true" :autoplay="true" :interval="5000" :duration="1000">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<view class="swiper-item uni-bg-red">
						<image class="swiper-img" :src="imgURL+item.resUrl"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="cont-box">
			<view class="cont-child">
				<view class="title-box flex-s">
					<view class="title-left">
						<image class="title-bg" src="@/static/img/text-bg.png"></image>
						<text class="title-text">{{info.name||''}}</text>
					</view>
					<view class="title-right" @click="openLoca(info)">
						<image class="ljdh" src="@/static/img/wz-icon.png"></image>
						<text class="title-right-text">立即导航</text>

					</view>
				</view>
				<image class="jingdian-bg" src="@/static/img/jingdian-bg1.png"></image>
				<view class="cont-text">
					
					<u-parse :content="info.introduce"></u-parse>
				 </view>
			</view>
		</view>
		 


		<view style="width:100%;height:240rpx"></view>

	</view>
</template>

<script>
	 
	import {
		imgURL
	} from '@/api/config'

	import {
		scenicDetail

	} from '@/api/common'

	export default {
		components: {

			 
		},
		data() {
			return {
				imgURL,
				audioSrc:'',
				info: {},
				swiperList: [],
				// https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3
			};
		},

		onLoad(option) {
			if (option.id) {
				this.getDetail(option.id)
			}
		},
		onShow() {

			
		},

		methods: {
			// 地址导航
			openLoca(row) {
				let data = {
					latitude: parseFloat(row.latitude),
					longitude: parseFloat(row.longitude),
					name: row.name,
					address: row.name
				}
				uni.openLocation({
					latitude: data.latitude,
					longitude: data.longitude,
					name: data.name,
					address: data.address,
					success: function() {
						console.log('success');
					}
				});
			},
			onPlay() {
				console.log('播放开始')
			},
			onPause() {
				console.log('播放暂停')
			},
			onEnded() {
				console.log('播放结束')
			},

			getDetail(id) {
				scenicDetail(id).then(res => {
					if (res.code == 200) {
						this.info = res.data
						this.swiperList = res.data.scenicBannerList
						 
					} else {
						uni.$u.toast(res.msg)
					}
				})
			},
		},
		 
	};
</script>

<style scoped lang="scss">
	.content {
		height: 100vh;
		overflow-y: auto;
		box-sizing: border-box;
		background: #F6F1E5;

		.topImg {
			width: 750rpx;
			height: 498rpx;
		}

		.head_box {
			width: 750rpx;
			height: 498rpx;
			 

			.swiper {
				width: 750rpx;
				height: 498rpx;

			}

			.swiper-item {
				display: block;
				height: 498rpx;
				text-align: center;

				.swiper-img {
					width: 100%;
					height: 100%;
					overflow: hidden;
				}
			}


		}

		.cont-box {
			padding: 0 30rpx;
			margin-top: -40rpx;
			position: relative;
			z-index: 1;

			.cont-child {
				background: #fff;
				padding: 0 30rpx;
				padding-bottom: 50rpx;
				border-radius: 20rpx;
				min-height: 400rpx;
				position: relative;

				.jingdian-bg {
					width: 690rpx;
					height: 230rpx;
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
				}
			}
		}

		.title-box {
			padding: 0 30rpx;
			padding-right: 10rpx;
			position: relative;
			z-index: 3;

			.title-left {
				width: 208rpx;
				height: 88rpx;
				font-family: SF Pro Display, SF Pro Display;
				font-weight: bold;
				font-size: 32rpx;
				color: #4C604E;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;

				.title-bg {
					width: 208rpx;
					height: 88rpx;
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
				}

				.title-text {
					padding-bottom: 8rpx;
					position: relative;
					z-index: 1;
				}
			}

			.title-right {
				display: flex;
				align-items: center;
				font-family: SF Pro Display, SF Pro Display;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;

				.title-right-text {}

				.ljdh {
					width: 26rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
			}
		}

		.cont-text {
			font-family: SF Pro Display, SF Pro Display;
			font-weight: 400;
			font-size: 26rpx;
			color: #9E9E9E;
			position: relative;
			padding-top: 30rpx;
			z-index: 3;
		}


		.audioBox {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			background: #006C04;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			padding: 30rpx;
			z-index: 9;
		}
	}
</style>